<template>
	<view class="card form ">
		<view class="form-content">
			<view class="form-item" @click="toCitys">
				<view class="value1 ellipsis-1">{{queryParams.destinationsName || '目的地'}}</view>
				<text class="icon icon-jiantou2"></text>
			</view>
			<view class="form-item-c" @click="toCalendar">
				<view class="account">
					<view class="">入住</view>
					<view class="date">{{queryParams.CheckIn || '选择入住日期'}}</view>
				</view>
				<text class="tag"
					v-if=" queryParams.CheckIn && queryParams.CheckOut">{{calculateStayNights(queryParams.CheckIn,queryParams.CheckOut)}}晚</text>
				<text class="tag" v-else>1晚</text>
				<view class="account">
					<view class="">离店</view>
					<view class="date">{{queryParams.CheckOut || '选择离店日期'}}</view>
				</view>
			</view>

			<view class="form-item" @click="popupBottom?.open('bottom')">
				<view class="value1">{{fiterData.AdultGuests+'成人'+fiterData.ChildrenGuests + '儿童'||'1成人0儿童'}}</view>
				<text class="icon icon-jiantou2"></text>
			</view>
			<view class="form-item" @click="toMenu">
				<view class="value1">{{queryParams.BrandName||'品牌'}}</view>
				<text class="icon icon-jiantou2"></text>
			</view>
		</view>
		<button class="form-button" @click="SubmitEvent">查询酒店</button>
	</view>
	<uni-popup ref="popupBottom" type="bottom">
		<guestInfo :fiterData="fiterData" />
	</uni-popup>
</template>

<script setup lang="ts">
	import { calculateStayNights } from '../../../utils'
	import { ref } from 'vue'
	import guestInfo from '../../hotel/components/guest-info.vue'
	const popupBottom = ref(null)
	const props = defineProps<{
		queryParams : any
	}>()
	const fiterData = ref({
		Rooms: 1,
		AdultGuests: 1,
		ChildrenGuests: 0,
		// ChildrenAges: []
	})
	const SubmitEvent = () => {
		console.log(Object.values(props.queryParams).join(''))
		if (!Object.values(props.queryParams).join('')) return uni.showToast({
			title: '请先选择目的地OR入住时间',
			icon: 'none'
		})
		const params = { ...props.queryParams, ...fiterData.value,destinationId:uni.getStorageSync('homeParams').destinationId }
		if (!params.destinationsName) {
			return uni.showToast({
				title: '请先选择目的地',
				icon: 'none'
			})
		}
		if (!params.CheckIn) {
			return uni.showToast({
				title: '请先选择入住时间',
				icon: 'none'
			})
		}
		const token = uni.getStorageSync('refreshToken') || uni.getStorageSync('accessToken')
		if (!token) {
			uni.showToast({
				icon: 'error',
				title: '请先登录以继续操作！'
			})
			setTimeout(() => {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}, 1000)
			return
		}

		uni.navigateTo({
			url: '/pages/hotel/list?params=' + JSON.stringify(params)
		})

		//uni.removeStorageSync('homeParams')

	}
	const toCitys = () => {
		uni.navigateTo({
			url: '/pages/citys/index'
		})
	}

	const toCalendar = () => {
		uni.navigateTo({
			url: '/pages/calendar/index'
		})
	}
	const toMenu = () => {
		uni.navigateTo({
			url: '/pages/menu/index'
		})
	}
</script>

<style lang="scss" scoped>
	.form {
		position: relative;
		margin-top: -20rpx;
		background-color: #FFF;
		border-radius: 16rpx;
		border: 1px solid #e1e1e1;

		&-content {
			width: 90vw;
			// margin: 20rpx 20rpx 0;
			// padding: 0 20rpx;
			border-radius: 16rpx;
			background-color: #fff;
		}

		.arrow::after {
			content: "\e600";
			position: absolute;
			top: 50%;
			color: #ccc;
			font-family: "iconfont" !important;
			font-size: 32rpx;
			transform: translateY(-50%);
		}

		.form-item-c {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 25rpx;
			font-size: 28rpx;
			border-bottom: 1px solid #e1e1e1;

			.tag {
				color: #5382fc;
				background-color: #bfdbfe;
				padding: 5rpx 10rpx;
				font-size: 20rpx;
				// line-height: 20rpx;
				border-radius: 5rpx;
			}


			.account {
				color: #666;
				display: flex;
				flex-direction: column;

				.date {
					color: #000;
					font-weight: bold;
				}
			}
		}

		&-item {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			// line-height: 50rpx;
			padding: 25rpx;
			font-size: 28rpx;
			border-bottom: 1px solid #e1e1e1;

			.value1 {
				font-size: 45rpx;
				line-height: 50rpx;
				color: #000;
				font-weight: bold;
			}

			.value {
				font-size: 40rpx;
				line-height: 50rpx;
				color: #000;
				font-weight: bold;
			}

			.icon {
				font-size: 40rpx;
			}


			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.radio {
				margin-right: 20rpx;
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}

		&-button {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 30rpx;
			color: #fff;
			border-radius: 10rpx;
			font-size: 30rpx;
			background-color: #5382fc;
		}

		.tip {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 30rpx 20rpx;
			font-size: 30rpx;
			color: #6b7280;
		}
	}
</style>